<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片上传</title>
     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<!--<link rel="stylesheet" href="need/layer.css" />-->
		<style>
			*{
				padding:0;
				margin:0;
			}
			body{
				width:100%;
				height:100%;
			}
			
			.imgWrap{
				width:80%;
				height:250px;
				margin:30px auto;
				border:1px solid #eee
			}	
			
			.imgWrap .addImg{
				width:150px;
				margin:90px auto
			}
			.imgWrap .addImg img{
				wdith:50px;
				height:50px;
				display: block;
				margin:0px auto;
			}
			.imgWrap .addImg p{
				text-align: center;
				font-size:14px;
				line-height: 20px;
			}
			
			.imgWrap #thumbImg{
				max-width: 100%;
				max-height: 100%;
			}
			
			.mainWrap .upImg{
				width: 80%;
				margin:50px auto 0 auto;
				background: #eee;
				border-radius: 20px;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		
		<div class="mainWrap">
			<div class="imgWrap" onclick="mySelectImg()">
				<div id="addImg" class="addImg" >
					<img src="img/add.png" alt="" />
					<p>添加图片</p>
				</div>
				<img src="" alt="" id="thumbImg"/>
			</div>
			<div class="upImg" onclick="upImg()">上传图片</div>
	
		</div>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="layer/layer.js"></script>
		<script>
			
			//alert("当前环境"+window.__wxjs_environment)
			
			
			var layerindex;
			var hostUrl="http://te.yin.mailsone.com";
			window.onload=function(){
				layerindex =layer.load(2, {shade: [0.3, '#000000']})
			}
			$.ajax({
				type:"get",
				dataType:"json",
				url:hostUrl+"/api/system/jssdk/signature",
				success:function(res){
					console.log(res)
					let resdata=res.data
					wx.config({
						debug: false,
		  				appId: resdata.appId,
				        timestamp: resdata.timestamp,
				        nonceStr: resdata.nonce,
				        signature: resdata.signature,
		  			    jsApiList:[
		  			        'chooseImage',
					        'previewImage',
					        'uploadImage',
					        'downloadImage',
					        'getLocalImgData'
		  			    ]
		  	    	});
		  	    	wx.ready(function(){
						layer.close(layerindex);
					});
		  	    	wx.error(function (res) {
		  	    		console.log(res)
		                layer.msg('服务器错误');
		            })
				},
				error:function(err){
					console.log(err)
				}
			});
			var images = {
			   localId: "",//微信返回的本地id
			};
			//选择图片
			function mySelectImg(){
				console.log(11)
				wx.chooseImage({
				    count: 1, // 默认9
				    sizeType: ['original'], 
				    sourceType: ['album', 'camera'],
				    success: function (res) {
				    	images.localId=res.localIds[0];
				    	if(window.__wxjs_is_wkwebview){ //判断手机是否支持wkwebview
				    		wx.getLocalImgData({ 
				    		    localId:res.localIds[0], // 图片的localID
				    		    success: function (res) {
				    		    	
				    		   	    var localData = res.localData;
				    		   	    $("#thumbImg").attr("src",localData)
				    		   	    $("#thumbImg").css({"display":"block"})
				    		   	    $("#addImg").css({"display":"none"})
				    		    },
				    		    fail:function(){
				    		    	layer.msg('操作失败');
				    		    }
				    		})
				    	}else{
				    		$("#thumbImg").attr("src",res.localIds[0])
				    		$("#thumbImg").css({"display":"block"})
				    		$("#addImg").css({"display":"none"})
				    	}
				    },
				    fail:function(res){
				      	layer.msg('操作失败');
				    }
				})
			}
			
			//图片上传
			function upImg(){
				if(images.localId==""){
					layer.msg('请选择图片');
					return false;
				}
				var index = layer.load(2,{shade: [0.3, '#000000'],content:'上传中',time: false,success: function(layero){
					layero.find('.layui-layer-content').css({'padding-top':'40px',"width":"50px","text-indent":"-10px"});
				}})
				//alert(images.localId)
				wx.uploadImage({
			        localId: images.localId,
			        success: function (res) {
			        	//alert("返回值"+res.serverId)
			        	//alert("请求地址:"+hostUrl+"/api/system/media/upload?mediaId="+res.serverId,)
						$.ajax({
							type:"get",
							url:hostUrl+"/api/system/media/upload?mediaId="+res.serverId,
							async:true,
							dataType:"json",
							success:function(res){
								//alert("状态码"+res.success+"状态留言："+res.message)
								if(res.success==20){
									layer.msg('上传成功');
									wx.miniProgram.postMessage({data: res.data.url})
									
									wx.miniProgram.navigateBack()
									//返回小程序
								}else{
									layer.msg('上传失败else');
									layer.close(index)
								}
							},
							error:function(res){
								layer.msg('上传失败fail');
								layer.close(index)
							}
						});			          
			        },
			        fail: function (res) {
			            layer.msg('上传失败fail');
					    layer.close(index)
			        }
				});
			}
	
		</script>
	</body>
</html>
